<template>
  <div class="scroll-page" ref="scroll-page" id="scroll-page">
    <!-- <div><img :src="img" width="50" height="50" alt=""></div> -->
    <!-- <div><img :src="require(`@/assets/image/${img2}.png`)" width="50" height="50" alt=""></div> -->
    <div><img :src="require(`@/assets${img3}`)" width="50" height="50" alt=""></div>
    <ol class="menu">
      <li v-for="(item, index) in menuList" :key="index" :class="{cur: currentInd === index, 'blues':true}" @click="menuClick(index)">{{ item.name }}</li>
    </ol>
    <ul class="container" ref="foodsUl">
      <li v-for="(item, index) in menuList" :key="index" class="item-box">
        <div class="title">{{ item.name }}</div>
        <div class="item" v-for="(items, indexs) in item.children" :key="indexs">
          <img :src="items.imgUrl" alt="">
          <!-- <img src="@/assets/image/ruinabing.png" alt=""> -->
          
          {{ items.name }}
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import ruinabing from "@/assets/image/ruinabing.png";
export default {
  data() {
    return {
      currentInd: 0, // 左边当前激活的菜单index
      scrollY: 0, // 右侧滑动的Y轴坐标 (滑动过程时实时变化)
      tops: [], // 所有右侧分类li的top组成的数组  (列表第一次显示后就不再变化)
      img: ruinabing,
      img2: 'ruinabing',
      img3: '/image/ruinabing.png',
      menuList: [
        {
          name: '瑞纳冰',
          children: [
            {                      
              name: '抹茶瑞纳冰', imgUrl: require('@/assets/image/ruinabing.png')
            },
            {
              name: '荔枝瑞纳冰', imgUrl: require('@/assets/image/ruinabing.png')
            },
            {
              name: '巧克力瑞纳冰', imgUrl: require('@/assets/image/ruinabing.png')
            },          
            {
              name: '浮云多多瑞纳冰', imgUrl: require('@/assets/image/ruinabing.png')
            },
            {
              name: '卡布奇诺瑞纳冰', imgUrl: require('@/assets/image/ruinabing.png')
            }                                      
          ],  
        },
        {
          name: '经典拿铁',
          children: [
            {  
              name: '拿铁', imgUrl: require('@/assets/image/natie.png')
            },
            {
              name: '陨石拿铁', imgUrl: require('@/assets/image/natie.png')
            },
            {
              name: '榛果拿铁', imgUrl: require('@/assets/image/natie.png')
            },          
            {
              name: '焦糖拿铁', imgUrl: require('@/assets/image/natie.png')
            },
            {
              name: '冲绳黑糖拿铁', imgUrl: require('@/assets/image/natie.png')
            }   
          ],  
        },
        {
          name: '大师咖啡',
          children: [
            { 
              name: '精粹奥瑞白', imgUrl: require('@/assets/image/dashikafei.png')
            },
            {
              name: '冰标准美式', imgUrl: require('@/assets/image/dashikafei.png')
            },
            {
              name: '标准美式', imgUrl: require('@/assets/image/dashikafei.png')
            },          
            {
              name: '加浓美式', imgUrl: require('@/assets/image/dashikafei.png')
            },
            {
              name: '精粹美式', imgUrl: require('@/assets/image/dashikafei.png')
            }   
          ],  
        },
        {
          name: '小鹿茶',
          children: [ 
            {
              name: '椰云荔荔', imgUrl: require('@/assets/image/xiaolucha.png')
            },
            {
              name: '荔枝雪芭', imgUrl: require('@/assets/image/xiaolucha.png')
            },
            {
              name: '抓马西瓜小铁', imgUrl: require('@/assets/image/xiaolucha.png')
            },          
            {
              name: '初恋青提小铁', imgUrl: require('@/assets/image/xiaolucha.png')
            },
            {
              name: '椰云荔荔', imgUrl: require('@/assets/image/xiaolucha.png')
            },
            {
              name: '荔枝雪芭', imgUrl: require('@/assets/image/xiaolucha.png')
            },
            {
              name: '抓马西瓜小铁', imgUrl: require('@/assets/image/xiaolucha.png')
            },
            {
              name: '初恋青提小铁', imgUrl: require('@/assets/image/xiaolucha.png')
            },                       
          ],  
        },
        {
          name: '甜品小吃',
          children: [
             {
              name: '葡萄风味鹿卡龙', imgUrl: require('@/assets/image/tianpin.png')
            },
            {
              name: '撞色玫瑰卡龙', imgUrl: require('@/assets/image/tianpin.png')
            },
            {
              name: '柚子芝士卡龙', imgUrl: require('@/assets/image/tianpin.png')
            },          
            {
              name: '原味瑞士卷', imgUrl: require('@/assets/image/tianpin.png')
            },
            {
              name: '葡萄风味半熟芝士', imgUrl: require('@/assets/image/tianpin.png')
            },
            {
              name: '葡萄风味鹿卡龙', imgUrl: require('@/assets/image/tianpin.png')
            },
            {
              name: '撞色玫瑰卡龙', imgUrl: require('@/assets/image/tianpin.png')
            },
            {
              name: '柚子芝士卡龙', imgUrl: require('@/assets/image/tianpin.png')
            },
            {
              name: '原味瑞士卷', imgUrl: require('@/assets/image/tianpin.png')
            },
            {
              name: '葡萄风味半熟芝士', imgUrl: require('@/assets/image/tianpin.png')
            },            
          ],  
        }                  
      ],
    };
  },
  mounted() {
    this.$nextTick(()=>{
      this._initTops();
    })
    window.addEventListener('scroll', this.scrollDs , true);
    this.$once("hook:beforeDestroy", () => {
      window.removeEventListener("scroll", this.scrollDs);
    });
  },
  computed: {
  },
  methods: {
    // 滚动事件
    scrollDs() {
      if(document.getElementById("scroll-page")) {
        let scroll = document.getElementById("scroll-page").scrollTop + 70;
        for (let i = 0; i < this.tops.length; i++) {
          if ( this.tops[i] < scroll && this.tops[i+1] > scroll) {
            this.currentInd = i;
          }
        }
      }
    },
    // 左边点击
    menuClick(index) {
      this.currentInd = index;
      this.$refs['scroll-page'].scrollTop = this.tops[index];
    },
    // 初始化tops
    _initTops() {
      // 1. 初始化tops
      const tops = [];
      let top = 0;
      tops.push(top);
      // 2. 收集
      // 找到所有分类的li
      const lis = this.$refs.foodsUl.getElementsByClassName("item-box");
      Array.prototype.slice.call(lis).forEach((li) => {
        top += li.clientHeight;
        tops.push(top);
      });

      // 3. 更新数据
      this.tops = tops;
    },
    clickMenuItem(index) {
      // 使用右侧列表滑动到对应的位置
      // 得到目标位置的scrollY
      const scrollY = this.tops[index];
      // 立即更新scrollY(让点击的分类项成为当前分类)
      this.scrollY = scrollY;
      // 平滑滑动右侧列表
      this.foodsScroll.scrollTo(0, scrollY, 300);
    },
  },
};
</script>
<style lang="less" scoped>
.scroll-page {
  display: flex;
  height: calc(100vh - 100px);
  // background: pink;
  overflow-y: auto;
  ul, ol {
    list-style: none;
  }
  li {
      border: 1px solid #000;
  }
  .menu {
    margin-left: 50px;
    position: fixed;
    top: 20%;
    left: 50px;
    li {
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      width: 80px;
      text-align: center;
    }
    .cur {
      color: #527BEE;
    }
  }
  .container {
    margin-left: 300px;
    li {
      width: 500px;
      padding-left: 20px;
    }
    .item-box {
      .title {
        // color: #527BEE;
        height: 40px;
        line-height: 40px;
        font-size: 24px;
        font-weight: bold;
        padding-left: 10px;
        border-bottom: 1px #ccc solid;
        position: relative;
        margin-bottom: 20px;
        &::before {
          content: '';
          display: inline-block;
          position: absolute;
          background: #527BEE;
          top: 5px;
          left: -5px;
          height: 30px;
          width: 5px;
          line-height: 30px;
        }
      }
      .item {
        display: flex;
        align-items: center;
        height: 80px;
      }
    }
  }
}
</style>